<template>
  <a-card
    :title="`﹝ ${title} ﹞`"
    hoverable
    :headStyle="{ fontWeight: 'bold' }"
  >
    <a-descriptions :column="2">
      <template #title>
        <a-Tag style="fontsize: 16px; padding: 3px 10px">提案信息</a-Tag>
      </template>
      <a-descriptions-item label="提案编号">A301</a-descriptions-item>
      <a-descriptions-item label="提案人">{{
        overture?.overturePeople
      }}</a-descriptions-item>
      <a-descriptions-item label="提案日期">{{
        overture?.writeTime
      }}</a-descriptions-item>

      <a-descriptions-item label="提案类型">{{
        overture?.suggestMethod
      }}</a-descriptions-item>

      <a-descriptions-item label="提案名称">
        {{ overture?.overtureName }}
      </a-descriptions-item>
    </a-descriptions>
    <a-divider />
    <a-Tag style="fontsize: 16px; font-weight: bold; padding: 3px 10px"
      >审核信息</a-Tag
    >
    <a-form
      :model="presidentCheckState"
      v-if="overture?.code === code"
      @finish="auditProposal"
    >
      <a-row :gutter="24" style="margin-top: 20px">
        <a-col :span="12">
          <a-form-item
            label="审核人"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 21 }"
            :rules="[{ required: true, message: '请填写审核人' }]"
          >
            <a-input
              v-model:value="presidentCheckState.auditUser"
            /> </a-form-item
        ></a-col>
        <a-col :span="12">
          <a-form-item
            label="审核时间"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 21 }"
            :rules="[{ required: true, message: '请填写审核时间' }]"
          >
            <a-input v-model:value="presidentCheckState.auditTime" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item
            label="审核意见"
            :label-col="{ style: { width: '80px' } }"
            :wrapper-col="{ style: { width: 'calc(100% - 80px)' } }"
          >
            <a-textarea :rows="3" v-model:value="presidentCheckState.opinion" />
          </a-form-item>
        </a-col>
        <a-col :span="24" v-if="sign">
          <a-form-item
            label="签字"
            name="sign"
            :label-col="{ style: { width: '80px' } }"
            :wrapper-col="{ style: { width: 'calc(100% - 80px)' } }"
            :rules="[{ required: true, message: '请填写签名' }]"
          >
            <a-input v-model:value="presidentCheckState.sign" />
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="20">
          <a-button @click="router.back()">退回</a-button>
          <a-button type="primary" html-type="submit" style="margin-left: 10px"
            >审阅通过</a-button
          >
        </a-col>
      </a-row>
    </a-form>
    <a-descriptions :column="2" v-else style="margin-top: 20px">
      <a-descriptions-item label="审核人">{{
        overture?.presidentCheckAuditData?.auditUser
      }}</a-descriptions-item>
      <a-descriptions-item label="审核时间">{{
        overture?.presidentCheckAuditData?.auditTime
      }}</a-descriptions-item>
      <a-descriptions-item label="提案日期">{{
        overture?.writeTime
      }}</a-descriptions-item>

      <a-descriptions-item label="审核意见">
        {{ overture?.presidentCheckAuditData?.auditOpinion }}
      </a-descriptions-item>

      <a-descriptions-item label="审核签字" :span="2">
        {{ overture?.presidentCheckAuditData?.auditSign }}
      </a-descriptions-item>
    </a-descriptions>
  </a-card>
</template>

<script setup lang="ts">
import { reactive, onMounted } from "vue";
import { presidentCheckAuditOverture, getOvertrueConfig } from "@/api/overtrue";
import { useRoute, useRouter } from "vue-router";
import { message } from "ant-design-vue";
const route = useRoute();
const router = useRouter();
const props = defineProps<{
  overture: any;
  code: number;
  sign: boolean;
  title: string;
  behindData: any;
}>();

onMounted(() => {
  getOvertrueConfig(undefined, props.behindData.behind).then((res: any) => {
    presidentCheckState.code = res.data.data[0].code;
    presidentCheckState.codeName = res.data.data[0].title;
    presidentCheckState.codeColor = res.data.data[0].color;
  });
});


const presidentCheckState = reactive({
  overtureId: route.params.id as string,
  code: 0,
  codeName: '',
  codeColor: '',
  presidentCheckAuditId: "2989899450",
  auditUser: "是呆龙没错了(校长、书记审阅)",
  auditTime: "2077-450-450",
  opinion: "",
  sign: null,
  nowCode: props.code,
});
const auditProposal = () => {
  presidentCheckAuditOverture(presidentCheckState).then(() => {
    message.success("校长、书记审阅通过!");
    router.back();
  });
};
</script>

<style scoped lang="less">
:deep(.ant-descriptions-item-label) {
  color: #909399;
}
:deep(.ant-card-body) {
  cursor: default;
}
</style>
